<template>
  <div class="app-container">
    <el-card>
      <h4>企业风采</h4>
      <el-alert title="最多可上传6张企业风采图片" type="warning" closable>
      </el-alert>
      <div style="margin-top: 20px">
        <el-upload
          style="position: relative; display: inline-block; overflow: hidden"
          class="avatar-uploader"
          action="#"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-exceed="handleExceed"
          :on-change="handleChange"
          :on-success="handleSuccess"
          :before-upload="beforeUpload"
          :file-list="fileList"
          :before-remove="beforeRemove"
          :limit="6"
        >
          <!-- <div class="removeIcon"></div> -->
          <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>
<script>
// import {userId} from '@/store/user'
import { mapGetters } from "vuex";
import {
  queryEnterpriseApi,
  uploadCorporateStyleApi,
  delEnterpriseApi,
} from "@/api/qyManage";
export default {
  data() {
    return {
      imgUrl: "",
      fileList: [],
      formattedFileList: [],
    };
  },
  computed: {
    ...mapGetters(["userId",'cid']),
  },
  created() {
    this.queryEnterprise();
  },

  methods: {
    // 渲染数据
    async queryEnterprise() {
      const res = await queryEnterpriseApi(this.userId);
      this.formattedFileList = res.data.map((item, index) => {
        return {
          name: `image_${index}.jpg`, // 这里简单按顺序命名，可根据实际需求调整
          url: item.imgSrc,
          id: item.id,
        };
      });
      console.log(this.formattedFileList);
      this.fileList = this.formattedFileList;
    },
    beforeUpload(file) {
      // 先检查文件类型
      const types = ["image/jpeg", "image/gif", "image/bmp", "image/png"];
      if (!types.some((item) => item === file.type)) {
        // 如果不存在
        this.$message.error("上传图片只能是 JPG、GIF、BMP、PNG 格式!");
        return false;
      }
    },
    // 上传图片
    async handleChange(file, fileList) {
      try {
        // 检查新文件是否已经上传
        const newFile = fileList.find((f) => f.uid === file.uid);
        if (!newFile) {
          console.log(file);
          console.log(fileList);
          this.imgurl = file.raw;
          this.fileList = fileList.map((item) => item);
          const formData = new FormData();
          formData.append("file", this.imgurl);
          const res = await uploadCorporateStyleApi(formData, this.cid);
          console.log(res);
          if (res.code === 1) {
            this.$message.success("上传成功");
            this.queryEnterprise();
          } else {
            this.$message.error(res.msg);
          }
        }
      } catch {
        this.$message.error("上传失败");
      }
    },
    handleExceed(file, fileList) {},
    handleSuccess(file) {
      console.log(file);
    },
    async beforeRemove(file) {
      try {
        console.log(file);
        const res = await delEnterpriseApi(file.id);
        if (res.code === 1) {
          this.$message.success("删除成功");
        } else {
          this.$message.error("删除失败");
        }
      } catch {
        this.$message.error("删除失败");
      }
    },
  },
};
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
/* .removeIcon {
  width: 22px;
  height: 22px;
  line-height: 18px;
  border-radius: 50%;
  position: absolute;
  right: -10px;
  top: -10px;
  z-index: 999;
  cursor: pointer;
  background: #fff
    url()
    0 0 no-repeat;
} */
</style>
